<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>037-m_active和hover</title>
    <style></style>
  </head>

  <body ontouchstart>
    <p>有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。</p>
    <p>给 body 注册一个空的touchstart事件可将两种状态反转。</p>
    <p>
      <button class="test_but">点击</button>
    </p>
    <div class="hover_box">hover</div>
    <style>
      .hover_box:hover {
        background-color: red;
      }

      .test_but {
        width: 50%;
        height: 30px;
        border-radius: 999px;
      }
    </style>
  </body>
</html>
